
<div class="pure-u-1 pure-u-md-1-2">
    <h4>Import CSV(s)</h4>
    <p>Import orders from an external service like Kickstarter</p>

    <form accept-charset="UTF-8" enctype="multipart/form-data" method="post" action="{{www_path}}/commerce/externalfulfillment/upload" name="import_csv" id="file_upload" class="nodefaultajax">
        <input type="hidden" name="docsvimport" value="makeitso" />

        <label for="csv_upload">CSV file(s)</label>
        <input type="file" name="csv_upload[]" multiple accept=".csv" />


        <label for="item_name">Name</label>
        <input type="text" id="fulfillment_name" name="fulfillment_name" value="" placeholder="A name for the imported campaign" class="required" />
        <button type="submit">Import Data</button>
    </form>

    <script src="{{www_path}}/ui/default/assets/scripts/jquery.iframe-transport.js"></script>
    <script src="{{www_path}}/ui/default/assets/scripts/jquery.fileupload.js"></script>

    <script type="text/javascript">
        $(function() {
            //TODO: potentially fire this manually so we can loop through in groups of 20's, to avoid max files limitations
            $('#loading').hide();

            $('#file_upload').fileupload({
                singleFileUploads: true,
                sequentialUploads: false,
                autoUpload: true,
                add: function (e, data) {
                    // remember the filename and submit
                    console.log("add");
                    data.submit();
                },
                send: function(e, data) {
                    // spinner, etc
                    console.log("send");
                    $('#loadingmask').css('width','101%');
                },
                fail: function(e, data) {
                    // we should do something useful here
                    console.log("fail");
                    $('#loadingmask').css('width','1%');
                },
                done: function (event, data) {
                    // hide the spinner, add the final key to the location field of the
                    // main form, call ajax/finalizeupload with the key
                    console.dir(data);


                    $('#loadingmask').css('width','1%');

                }
            });
        });
    </script>
</div><!--pure-->

<div class="pure-u-1 pure-u-md-1-2">
    <h4>All items</h4>
    {{#items_all}}
        <ul class="alternating">
            {{#items_all}}
                <li>
                    <a class="primary" href="{{www_path}}/commerce/items/edit/{{id}}">
                        <strong>{{name}}</strong>{{#description}}<span class="descriptive spaced fadedtext">{{description}}</span>{{/description}}</a>
                    <div class="more"><div class="toggle"></div><!--toggle-->
                        <div class="actions">
                            <div class="action-inner">
                                <a href="{{www_path}}/commerce/items/edit/{{id}}" class="mininav_flush"><div class="icon icon-pencil"></div><!--icon-->Edit</a>
                                <a href="{{www_path}}/commerce/items/delete/{{id}}" class="mininav_flush needsconfirmation"><div class="icon icon-ban"></div><!--icon--> Delete</a>
                            </div><!--action-inner-->
                        </div><!--actions-->
                    </div><!--more-->
                </li>
            {{/items_all}}
        </ul>
    {{/items_all}}

    {{^items_all}}
        <p>No items have been defined.</p>
    {{/items_all}}
</div><!--pure-->

